<template>
    <div class="home">
        <nav-bar class="home-navbar"><div slot="center">购物街</div></nav-bar>
        <tab-control 
        v-show="isHeightAcitve"
        :titles="['流行','新款','精选']"
        @tabClick="updatedIndex"
        class="tab-control"
        ref="tabCtrl2"
        >
        </tab-control>
        <scroll 
        ref="scroll" class="home-scroll" 
        :probe-typed='3'
        :pull-up-load='true' 
        @pullUpLoad = "pullUpLoadWatch"
        @pushPosition = "PositionWatch">
            <home-swiper :banners="banners" @swiperImgLoaded.once = 'swiperImgLoaded'></home-swiper>
            <home-recommend :recommends='recommends'></home-recommend>
            <home-feature></home-feature>
            <tab-control 
            :titles="['流行','新款','精选']"
            @tabClick="updatedIndex"
            ref="tabCtrl1"
            >
            </tab-control>
            <goods-list 
            :goods-list="showGoods">
            </goods-list>
        </scroll>
        <back-top @click.native = "gotoTop" v-show="isShowBackTop"></back-top>
    </div>
</template>

<script>
    import Scroll from 'components/common/scroll/Scroll.vue'

    import NavBar from 'components/common/navbar/NavBar.vue'
    import TabControl from 'components/content/TabControl/TabControl.vue'
    import goodsList from 'components/content/goods/goodsList.vue'
    import BackTop from 'components/content/backTop/BackTop.vue'

    import HomeSwiper from './childComps/HomeSwiper.vue'
    import HomeRecommend from './childComps/HomeRecommend.vue'
    import HomeFeature from './childComps/HomeFeature.vue'
    
    import { getHomeMultiData,getHomeGoods } from 'network/home'
    
    import {debounce} from 'common/debounce.js'
    import {BackTopMixin} from 'common/mixin.js'


    export default {
        name:'Home',
        data () {
            return {
                banners:[],
                recommends:[],
                goods:{
                    pop:{page:0,list:[],visited:true},
                    new:{page:0,list:[],visited:false},
                    sell:{page:0,list:[],visited:false}
                },
                visited:{},
                currentType:'pop',
                isHeightAcitve:false,
                topOffsetTop:0,
                scrollY:0,

            }
        },
        mixins:[BackTopMixin],
        computed:{
            showGoods(){
                return this.goods[this.currentType].list
            }
        },
        components: {
            Scroll,

            NavBar,
            TabControl,
            goodsList,
            BackTop,

            HomeSwiper,
            HomeRecommend,
            HomeFeature
        },
        created(){
            this.initHomeMultiData(),
            this.moreHomeGoods('pop'),
            this.moreHomeGoods('new'),
            this.moreHomeGoods('sell')
        },
        mounted(){
            // 防抖动化监听事件总线中的图片加载
            const refresh = debounce(this.$refs.scroll.refreshScroll,20)
            this.$bus.$on('homeImgLoaded',()=>{
                // 刷新
                refresh()
            })
        },
        methods:{
            /**
             * 横幅加载完成后，修改组件中记录的tabctrl1的offsetTop
             */
            swiperImgLoaded(){
                this.offsetTop=this.$refs.tabCtrl1.$el.offsetTop
            },
            /**
             * 事件监听相关方法
             */
            updatedIndex(index){
                if(index == 0){
                    this.currentType = 'pop'
                }else if(index == 1){
                    this.currentType = "new"         
                }else{
                    this.currentType = "sell"
                }
                //切换时判断之前是否浏览过该类型，若无则自动滚动到头部
                if(this.goods[this.currentType].visited == false){
                    this.$refs.scroll.scrollTo(0,-this.offsetTop,600)
                    this.goods[this.currentType].visited = true
                }
                //修改两个组件中对应的index,使她两保持一致
                this.$refs.tabCtrl1.currentIndex = index
                this.$refs.tabCtrl2.currentIndex = index
            },
            // 监听scroll定位显示回到顶部
            PositionWatch(position){
                //判断是否到达回顶部按钮出现的位置
                this.listenShowBT(position)
                // 判断是否到达固定tabControl的位置（利用组件中offsetTop），用于判断tabctrl2是否显示
                this.isHeightAcitve=position.y < -(this.offsetTop) 
            },
            //抵达底部获取数据
            pullUpLoadWatch(){
                this.moreHomeGoods(this.currentType)
            },
            /**
             * 网络请求相关方法
             */
            initHomeMultiData(){
                getHomeMultiData().then(({data:{data}})=>{
                this.banners = data.banner.list
                this.recommends = data.recommend.list
                })
            },
            moreHomeGoods(type){
                const page = this.goods[type].page+1
                getHomeGoods(type,page).then(res=>{
                    this.goods[type].list.push(...res.data.data.list)
                    this.goods[type].page++
                    this.$refs.scroll.finishPullUp()
                })
            },

            
            
        },
        activated(){
            this.$refs.scroll.refreshScroll()
            this.$refs.scroll.scrollTo(0,this.scrollY,0)
        },
        deactivated(){
            this.scrollY = this.$refs.scroll.getScrollY()
        }
    }
</script>

<style scoped>
.home{
    height: 100vh;
}
.home-navbar{
    background: var(--color-tint);
    color: #fff
}
.home-scroll{
    /* margin-top: 43px;
    height: calc(100% - 49px); */
    overflow: hidden;
    position: absolute;
    top: 43px;
    bottom: 49px;
    left: 0px;
    right: 0px;
}
.tab-control{
    position: relative;
    top: -1px;
    z-index: 1;
}
</style>